@import '../app/variables.css';
@import './states.css';

:root {
  --amount-positive-color: var(--color-success-dark);
  --amount-negative-color: var(--color-grayscale-dark);
  --filter-list-color: var(--color-grayscale-medium);
  --header-balance-unit-font-size-XL: 20px;
  --header-balance-unit-font-size-L: 18px;
  --header-subtitle-font-size-XL: 18px;
  --header-subtitle-font-size-L: 16px;
  --list-line-height: 25px;
  --header-line-height: 36px;
}

.smallButton {
  display: inline-block;
}

.wrapper {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: none;
}

.transactions {
  & .activity {
    display: flex;
    flex-direction: column;
    height: var(--main-box-height);

    & header {
      padding-top: 20px;

      & .accountTitle {
        color: var(--color-grayscale-medium);
      }

      & .copy {
        color: var(--color-grayscale-medium);
      }

      & .title {
        margin: 26px 0;
        float: left;
      }

      & .account {
        text-align: right;
      }

      & h2 {
        font-weight: var(--font-weight-semi-bold);
      }

      & h3 {
        display: inline-block;
        margin: 0;
      }

      & .address {
        text-align: right;
        cursor: pointer;
        color: var(--color-grayscale-dark);
      }

      & .transfer {
        color: var(--color-grayscale-dark);
      }

      & .balanceUnit {
        font-weight: var(--font-weight-semi-bold);
      }

      & .headerButtons {
        float: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100% / 2 - 30%);
        min-width: 243px;
        margin-top: 20px;
      }

      & .headerButtons > a {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: var(--color-primary-standard);
        cursor: pointer;
        text-decoration: none;
      }

      & > div > a:first-child {
        margin-right: 15px;
      }

      & > div > a:last-child {
        & button {
          font-size: 16px;
        }
      }
    }
  }
}

.greyLabel {
  font-weight: var(--font-weight-semi-bold);
  color: var(--amount-negative-color);
}

.greenLabel {
  font-weight: var(--font-weight-semi-bold);
  color: var(--amount-positive-color) !important;
}

.list {
  font-weight: var(--font-weight-bold);
  color: var(--filter-list-color);
  line-height: var(--list-line-height);
  list-style: none;
  padding-left: 0px;
  margin-bottom: 37px;

  & .item {
    display: inline-block;
    cursor: pointer;

    &:not(:last-of-type) {
      margin-right: 50px;
    }
  }

  & .active {
    border-bottom: 2px solid var(--amount-negative-color);
    color: var(--amount-negative-color);
  }
}

@media (--xLarge-viewport) {
  .transactions {
    & .activity {
      & header {
        & h2 {
          & .balanceUnit {
            font-size: var(--header-balance-unit-font-size-XL);
          }
        }

        & .address {
          font-size: var(--header-subtitle-font-size-XL);
        }
      }
    }
  }
}

@media (--large-viewport) {
  .transactions {
    & .activity {
      & header {
        & h2 {
          & .balanceUnit {
            font-size: var(--header-balance-unit-font-size-L);
          }
        }

        & .address {
          font-size: var(--header-subtitle-font-size-L);
        }
      }
    }
  }
}
